<layout-header></layout-header>

<div class="container-xl mb-3">
    <div class="main row g-3">

        <div class="col-md-5 col-lg-4">
            <div class="card mb-3">
                <div class="card-header">
                    <i class="bi bi-bootstrap-reboot"></i> 令牌
                </div>
                <form class="m-3" (ngSubmit)="submitForm()" #myform="ngForm">
                    <div class="input-group">
                        <input type="text" name="phrase" class="form-control" [(ngModel)]="formdata.token" />
                        <button type="submit" class="btn btn-secondary" [disabled]="myform.invalid">确认</button>
                    </div>
                    <div class="form-text">
                        若服务端设置了 <b>Web.Token</b>，请在这里填写
                    </div>
                </form>
            </div>

            @if (!islogin && loginqr) {
            <div class="card d-flex justify-content-center align-items-center p-3 mb-3">
                @if (loginqr.result) {
                <qr-code [value]="loginqr.result" [size]="260" [margin]="0"></qr-code>
                <div>间隔 200 秒自动刷新</div>
                } @else {
                <div>未获取到二维码，稍后自动重试</div>
                }
            </div>
            }

            @if (user) {
            <div class="card version mb-3">
                <div class="card-header">
                    <i class="bi bi-alexa"></i> 用户信息
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item text-truncate">
                        <b>微信 ID</b>
                        <span>{{user.wxid}}</span>
                    </li>
                    <li class="list-group-item text-truncate">
                        <b>微信昵称</b>
                        <span>{{user.name}}</span>
                    </li>
                    <li class="list-group-item text-truncate">
                        <b>绑定手机</b>
                        <span>{{user.mobile}}</span>
                    </li>
                </ul>
            </div>
            }

            @if (system) {
            <div class="card version mb-3">
                <div class="card-header">
                    <i class="bi bi-boxes"></i> 依赖组件
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item text-truncate">
                        <b>Wcferry</b>
                        <span>v{{system.wcf_version}}</span>
                    </li>
                    <li class="list-group-item text-truncate">
                        <b>微信版本</b>
                        <span>v{{system.wechat_version}}</span>
                    </li>
                </ul>
            </div>
            <div class="card version">
                <div class="card-header">
                    <i class="bi bi-columns-gap"></i> 系统版本
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item text-truncate">
                        <b>当前版本</b>
                        <span>v{{system.version}}</span>
                    </li>
                    <li class="list-group-item text-truncate">
                        <b>编译次序</b>
                        <span>b{{system.build_version}}</span>
                    </li>
                    @if (upgrade.url) {
                    <li class="list-group-item text-truncate">
                        <b>发现更新</b>
                        <a [href]="upgrade.url" target="_blank" class="text-decoration-none">下载 {{upgrade.version}}</a>
                    </li>
                    }
                </ul>
            </div>
            }
        </div>

        <div class="col-md-7 col-lg-8">
            <layout-aichat [avatar]="avatar && avatar.big_head_img_url"></layout-aichat>
        </div>

    </div>
</div>